<template>
  <div class="plugin-supplier scroll-box">
    <div class="bar"></div>
    <el-scrollbar>
      <div class="left scroll-box">
        <el-form :model="model.getData()" label-position="top">
          <el-form-item :label="plugin.lang('form.code')">
            <el-input v-model="where.code" clearable />
          </el-form-item>
          <el-form-item :label="plugin.lang('form.name')">
            <el-input v-model="where.name" clearable />
          </el-form-item>
          <el-form-item :label="plugin.lang('form.phone')">
            <el-input v-model="where.phone" clearable />
          </el-form-item>
          <el-form-item :label="plugin.lang('form.email')">
            <el-input v-model="where.email" clearable />
          </el-form-item>
          <div class="tools">
            <el-button type="primary" @click="model.page(1)" circle plain>
              <template #icon>
                <i class="iconfont min icon-search-max"></i>
              </template>
            </el-button>
            <el-button type="primary" @click="form.open(where)" circle>
              <template #icon>
                <i class="iconfont min icon-add-max"></i>
              </template>
            </el-button>
          </div>
        </el-form>
      </div>
      <div class="right">
        <Table @form="data => form.open(data)" />
        <div class="page">
          <el-pagination
            @current-change="model.page"
            :current-page="where.page"
            :page-size="where.page_size"
            layout="total, prev, pager, next, jumper"
            :total="where.page_total"
            background>
          </el-pagination>
        </div>
        <Form ref="form" />
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import model from '../model'

import Table from './table'
import Form from './form'

export default {
  components: {
    Table,
    Form
  },
  setup() {
    // 表单
    const form = ref(null)
    // 条件 
    const where = model.data

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      model,
      where,
      form
    }
  }
}
</script>